<template>
    <div class="hngkContent">
        <div class="hngkLeft" id="hngkLeft">
            <div>
                <HngkLeftOne />
                <HngkLeftTwo />
            </div>
        </div>
        <div class="hngkRight">
            <div>
                <HngkRightOne
                    :countTotal="countTotal"
                    :countByCity="countByCity"
                />
                  <HngkRightThree />
                 <HngkRightTwo />
                <!-- <HngkRightFour /> -->
            </div>
        </div>
        <div>
            <!-- <rightBtn/> -->
        </div>
    </div>
</template>

<script>
import HngkLeftOne from "./hngkLeft/HngkLeftOne";
import HngkLeftTwo from "./hngkLeft/HngkLeftTwo";
import HngkRightOne from "./hngkRight/HngkRightOne";
import HngkRightTwo from "./hngkRight/HngkRightTwo";
import HngkRightThree from "./hngkRight/HngkRightThree";
// import HngkRightFour from "./hngkRight/HngkRightFour";
import { onMounted, ref, provide } from "vue";
import rightBtn from './RightBtn/index'
import { get } from "../../util/request";

const countByCityEffect = () => {
    let countByCity = ref([]);
    const getCountByCity = async () => {
        const result = await get("/countByCity");
        countByCity.value = result;
    };
    return { countByCity, getCountByCity };
};
const countTotalEffect = () => {
    let countTotal = ref({});
    const getCountTotal = async () => {
        const result = await get("/countTotal");
        countTotal.value = result;
    };
    return { countTotal, getCountTotal };
};
export default {
    components: {
        HngkLeftOne,
        HngkLeftTwo,
        HngkRightOne,
        HngkRightTwo,
        HngkRightThree,
        // HngkRightFour,
        rightBtn
    },
    setup(props, context) {
        const { countTotal, getCountTotal } = countTotalEffect();
        const { countByCity, getCountByCity } = countByCityEffect();

        onMounted(() => {
            getCountTotal();
            getCountByCity();
        });
        return {
            countTotal,
            countByCity,
        };
    },
};
</script>

<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .hngkLeft {
        leftContent();
    }

    .hngkRight {
        rightContent();
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .hngkLeft {
        leftContent3840();
    }
    .hngkRight {
        rightContent3840();
    }
}
</style>